<template>
  <view class="cart-box">
    <view v-if="cart.length !== 0" class="big-box">
      <!-- 收货地址组件 -->
      <myAddress></myAddress>
      <!-- 购物车列表头部 -->
      <view class="list-title">
        <uni-icons type="shop" size="17"></uni-icons>
        <view>购物车</view>
      </view>
      <!-- 购物车列表 -->
      <scroll-view class="list" scroll-y>
        <uni-swipe-action>
          <block v-for="(item, index) in cart" :key="index">
            <uni-swipe-action-item :right-options="options" @click="bindClick(item)" @change="swipeChange($event, index)">
              <view class="list-item">
                <view class="check-box"><checkbox :value="item.goods_id" :checked="item.goods_state" @click="changee(item)" /></view>
                <view class="img-box"><image :src="item.goods_small_logo"></image></view>
                <view class="info-box">
                  <text>{{ item.goods_name }}</text>
                  <view class="box-bottom">
                    <text class="bottom-text">￥{{ item.goods_price | priceFilter }}</text>
                    <uni-number-box :value="item.goods_count" :min="1" @change="changeCount(item, $event)"></uni-number-box>
                  </view>
                </view>
              </view>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </scroll-view>
      <!-- 结算组件 -->
      <settle></settle>
    </view>
    <view class="empty-box" v-else>
      <view class="empty-box-center">
        <image src="../../static/cart_empty@2x.png"></image>
        <text>空空如也~</text>
      </view>
    </view>
  </view>
</template>

<script>
import tabBarBadge from '@/mixins/tabBar-badge.js';
import { mapState, mapMutations, mapGetters } from 'vuex';
import myAddress from '../../components/my-address/my-address.vue';
import settle from '../../components/settle/settle.vue';

export default {
  mixins: [tabBarBadge],
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('myCart', ['cart']),
    ...mapGetters('myCart', ['goodsNum'])
  },
  methods: {
    ...mapMutations('myCart', ['changeChecked', 'changeCounted', 'delInCartGoods']),
    changee(item) {
      const obj = {
        goods_state: !!!item.goods_state,
        goods_id: item.goods_id
      };
      this.changeChecked(obj);
    },
    changeCount(item, val) {
      const obj = {
        goods_count: +val,
        goods_id: item.goods_id
      };
      this.changeCounted(obj);
      uni.setTabBarBadge({
        index: 2,
        text: this.goodsNum + ''
      });
    },
    bindClick(item) {
      console.log(item);
      this.delInCartGoods(item);
      uni.setTabBarBadge({
        index: 2,
        text: this.goodsNum + ''
      });
    },
    swipeChange(e, index) {
      console.log('当前状态：' + '，下标：' + index);
    }
  },
  onLoad() {},
  components: {
    myAddress,
    settle
  }
};
</script>

<style lang="scss">
.list {
  height: 69vh;
}
.list-title {
  display: flex;
  height: 56rpx;
  padding: 15rpx;
  align-items: center;
  border-bottom: 1px solid #efefef;
  view {
    margin-left: 20rpx;
    font-size: 28rpx;
  }
}

.list-item {
  display: flex;
  padding: 15rpx;
  width: 100%;
  border-bottom: 1px solid #efefef;
  .check-box {
    display: flex;
    align-items: center;
  }
  .img-box {
    width: 200rpx;
    height: 200rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .info-box {
    padding-left: 15rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text {
      font-size: 26rpx;
    }
    .box-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bottom-text {
        font-size: 32rpx;
        color: #f40000;
        font-weight: 800;
      }
    }
  }
}

.empty-box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .empty-box-center {
    transform: translateY(-50%);
    color: #888;
    text-align: center;
    image {
      display: block;
      width: 220rpx;
      height: 220rpx;
      margin-bottom: 15rpx;
    }
  }
}
</style>
